JavaScript Fundamentals - Technical Documentation

Introduction

JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

This documentation aims to provide a comprehensive guide to JavaScript fundamentals for beginners and experienced programmers alike.

Created in 1995 by Brendan Eich
Became an ECMA standard in 1997
Not related to Java despite the similar name

Getting Started

To get started with JavaScript, you don't need any special tools - just a modern web browser and a text editor.

You can write JavaScript directly in your HTML file using script tags:


        <script>
          console.log("Hello, World!");
        </script>

Or you can link to an external JavaScript file:


        <script src="script.js"></script>

It's generally considered best practice to place your scripts at the end of the body element to ensure the HTML has been fully loaded before executing JavaScript.

Variables and Data Types

JavaScript has three keywords for declaring variables: var, let, and const.

The let and const keywords were introduced in ES6 (2015) and are now preferred over var.


        // Variable declarations
        let name = "John";
        const age = 30;
        var isStudent = true;

JavaScript has several data types:

String: For text values
Number: For numeric values
Boolean: true or false
Object: Collections of properties
Array: Ordered collections

You can use the typeof operator to check the type of a variable:


        console.log(typeof "Hello"); // "string"
        console.log(typeof 42); // "number"
        console.log(typeof true); // "boolean"

Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value.

There are several ways to define functions in JavaScript:


        // Function declaration
        function greet(name) {
          return "Hello, " + name + "!";
        }

        // Function expression
        const sayHello = function(name) {
          return "Hello, " + name + "!";
        };

        // Arrow function (ES6)
        const welcome = (name) => {
          return "Welcome, " + name + "!";
        };

Functions can be called with arguments that get passed to the parameters:

JavaScript also supports default parameters, rest parameters, and other advanced features.

Functions are first-class objects in JavaScript
They can be passed as arguments to other functions
They can be returned from functions
They can have properties and methods

Control Flow

Control flow statements allow you to control the execution flow of your program based on certain conditions.

The if statement executes a block of code if a specified condition is true:


        if (condition) {
          // code to be executed if condition is true
        } else {
          // code to be executed if condition is false
        }

The switch statement is used to perform different actions based on different conditions:


        switch(expression) {
          case x:
            // code block
            break;
          case y:
            // code block
            break;
          default:
            // code block
        }

Loops are used to execute a block of code multiple times:

for loop: repeats until a specified condition evaluates to false
while loop: executes as long as a specified condition is true
do...while loop: executes at least once, then repeats as long as a condition is true

Arrays and Objects

Arrays are ordered collections of values that can be of any type.

You can create arrays using array literals or the Array constructor:


        // Array literal
        const fruits = ["Apple", "Banana", "Cherry"];
        
        // Array constructor
        const cars = new Array("Volvo", "BMW", "Ford");

Objects are collections of key-value pairs. They can be created using object literals or the Object constructor:


        // Object literal
        const person = {
          firstName: "John",
          lastName: "Doe",
          age: 30,
          greet: function() {
            return "Hello, " + this.firstName;
          }
        };

Arrays and objects have many built-in methods to manipulate and access data.

Array methods: push(), pop(), shift(), unshift(), splice(), slice()
Object methods: Object.keys(), Object.values(), Object.entries()

DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents.

JavaScript can be used to access and manipulate the DOM:


        // Selecting elements
        const element = document.getElementById("myId");
        const elements = document.getElementsByClassName("myClass");
        const elementsByTag = document.getElementsByTagName("div");
        const querySelector = document.querySelector(".myClass");

You can modify elements using various properties and methods:


        // Changing content
        element.textContent = "New text";
        element.innerHTML = "Bold text";
        
        // Changing attributes
        element.setAttribute("class", "newClass");
        element.style.color = "red";

Event listeners allow you to execute code when specific events occur:

The DOM is a powerful interface that allows JavaScript to interact with HTML elements and create dynamic web pages.

Events include: click, mouseover, keydown, submit, load
Elements can be created, modified, and removed
DOM manipulation is key to creating interactive web applications